<template>
<!-- 放大镜组件 -->
      <div class="goods_magnifying1">
        <!-- 最外层 -->
        <div class="zoom">
            <!-- 左边部分 -->
               <div class="left" >
                  <!-- 左边中图片 -->
                <img :src="pic2" />
               <!-- 遮罩层 -->
               <div class="mask"></div>
               <!-- 透明层 
                 使用踢图片上的透明层来获取鼠标位置   
               -->
               <div class="glass"></div>
            </div>

            <!-- 小图加按钮 -->
            <div class="bottom">
               <div class="an1">
                 <button>&lt;</button>
               </div>
               <div class="small_pic1">
                 <ul>
                    <li v-for="tp in pic" :key="tp.pid"><img class="tp_01" :src="tp.picture_address"/></li>
                 </ul>
               </div>
                 <div class="an1">
                 <button>></button>
               </div>
            </div>

            <!-- 右边部分 -->
               <div class="right">
                  <!-- 右边大图 -->
                <!-- <img src="/img_hd/img-cs/0003-1-1.png" class="bigImg" /> -->
                <img :src="pic2" class="bigImg" />
               </div>
        </div>
      </div>
</template>

<script>
import $ from "jquery"
    export default {
        props:['pic','pic2'],
         created(){
    
         },
        mounted () {
          console.log('测试kkk:',this.pic2);
             /*
             1、右侧部分
            */ 
         let rightObj=(function(){
            let  rightElm=document.querySelector('.right')
             let  bigImgElm=document.querySelector('.bigImg')

            // 显示
              function show(){
                rightElm.style.display='block'
              }
            // 隐藏
            function hide(){
                rightElm.style.display='none'
              }
            // 图片移动 xRate表示移动的比例，例如0.5
            // 移动哪里右边大图就放大哪里
            function moveImgRate(xRate,yRate){
                xRate=xRate*100
                yRate=yRate*100
                bigImgElm.style.transform=`translate(-${xRate}%,-${yRate}%)`
            }
            return{
                show:show,
                hide:hide,
                moveImgRate:moveImgRate
            }
           }())
             

             /*
             2、遮罩层
            */ 
               let maskObj=(function(){
                  let maskElm=document.querySelector('.mask')
               let leftElm=document.querySelector('.left')
             // 显示
               
               function show(){
                maskElm.style.display='block';
               }
             // 隐藏
                function hide(){
                    maskElm.style.display='none';
                }


            // 计算mask遮罩层合理移动的最大值(不能超出左边图片的范围)
            // 左边图片宽高减去遮罩层的宽高
            let maxLeft=leftElm.offsetWidth-maskElm.offsetWidth;
            let maxTop=leftElm.offsetHeight-maskElm.offsetHeight;
            // let maxLeft=maskElm.previousElement.offsetWidth-maskElm.offsetWidth;
            // let maxTop=maskElm.previousElement.offsetHeight-maskElm.offsetHeight;

            //  跟随鼠标移动
                function setPos(mouseX,mouseY){
                    ///减去 mask遮罩层 宽高的一半，为的是让鼠标显示在mask中心位置
                    let x=mouseX-maskElm.offsetWidth/2;
                    let y=mouseY-maskElm.offsetHeight/2;

                  //判断x,y是否超出左边图片，并且纠正
                  if(x<0){
                     x=0;
                  } else if(x>maxLeft){
                      x=maxLeft
                  }

                  if(y<0){
                     y=0;
                  }else if(y>maxTop){
                     y=maxTop;
                  }

                  maskElm.style.left=x+'px';
                  maskElm.style.top=y+'px';
                }

               //  计算遮罩层移动的比例(移动哪里右边大图就放大哪里的比例)
               function getPosRate(){
                  let xRate=maskElm.offsetLeft /leftElm.offsetWidth;
                  let yRate=maskElm.offsetTop/leftElm.offsetHeight;
                  return{
                     xRate:xRate,
                     yRate:yRate
                  }
               }

                return {
                  show:show,
                  hide:hide,
                  setPos:setPos,
                  getPosRate:getPosRate
                }
               }())
               

            /*
             3、透明层
            */ 
           let glassObj=(function(){
            let glassElm=document.querySelector('.glass')
            // 鼠标移入事件
            glassElm.addEventListener('mouseenter',function(){
                rightObj.show();
                maskObj.show();
            })
            // 鼠标移入出事件
            glassElm.addEventListener('mouseleave',function(){
                rightObj.hide();
                maskObj.hide();
            })

            //绑定监听鼠标移动事件
            glassElm.addEventListener('mousemove',function(e){
                  maskObj.setPos(e.offsetX,e.offsetY)
                  let{xRate,yRate}=maskObj.getPosRate();
                  rightObj.moveImgRate(xRate,yRate)
            })
           }(rightObj,maskObj))
            
          //默认情况下，遮罩层和右边大图都隐藏
          maskObj.hide();
          rightObj.hide() ;


         

        },

        updated(){

              // jquery
         $(function(){
            // 第一个框默认选中
            $('.bottom>.small_pic1>ul>li:first-child').addClass('active_1')

                $('.bottom>.small_pic1>ul>li').mouseenter(function(){
                  // 红框框
                   $(this).addClass('active_1').siblings().removeClass('active_1');
                  //  获取小图的src地址
                   const a=$(this).children('img').attr('src');
                  //  console.log(a)
                  //  把小图的src地址替换给大图和中图
                   $('.left').add('.right').children('img').attr('src',`${a}`);
                })

               
                var cs1=0
               // 按钮下一个图片
               $('.bottom>.an1:last-child').click(function(){
                  // 获取小图片的序号
                   let a=$('.bottom ul>li:last-child').index()-4;
                  // 获取小图片宽度
                   let b=parseInt($('.bottom ul>li').outerWidth())+6;
                  //  console.log(cs1+=b);
                  // 每点一次都加一次小图片宽度
                   cs1+=b
                  //  如果总宽大于 序号乘以小图片宽度
                   if(cs1>a*b){
                     // 总宽就等于序号乘以小图片宽度
                     cs1=a*b
                   }
                  // 总宽度向左移动
                   $('.bottom ul').css('transform',`translateX(-${cs1}px)`)
                                    
               })


                 // 按钮上一个图片
               $('.bottom>.an1:first-child').click(function(){
                  // 获取小图片的序号
                   let a=$('.bottom ul>li:first-child').index()+1;
                   // 获取小图片宽度
                   let b=parseInt($('.bottom ul>li').outerWidth())+6;
                   // 每点一次都减一次小图片宽度
                   cs1-=b
                   //  如果总宽小于于 序号乘以小图片宽度
                   if(cs1<a*b){
                     // 总宽就等于0
                     cs1=0
                   }
                   // 总宽度向右边移动
                   $('.bottom ul').css('transform',`translateX(-${cs1}px)`)
                                    
               })

          })
        },


    }
</script>

<style lang="scss" scoped>
   ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
         }
         .zoom{
            // width: 1200px;
            margin: 0 auto;
           /* border: 1px solid red; */
           position: relative;
           left: 0;
           top: 0;
         }
         /* 左边图 */
         .left{
            width: 450px;
            height: 450px;
            display: flex;
             justify-content: center;
            /* border: 1px solid blue; */
            overflow: hidden;
         }
         /* 左边图宽度 */
         .left img{
            // width: 100%;
            height: 100%;
           
         }
         /*遮罩层
            遮罩层宽高 / 左边元素宽高 == 右边元素宽高 / 大图片宽高
            遮罩层宽高 == 左边元素宽高 *（右边元素宽高 / 大图片宽高）
            */
         .mask{
            width: 225px;
            height: 225px;
            border: 1px solid #888;
            background-color: #fff;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
         }
         /* 透明层 */
         .glass{
            width: 450px;
            height: 450px;
            /* background-color: lightcoral;
            opacity:0.5; */
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
         }
         /* 右边图 */
         .right{
            width: 400px;
            height: 400px;
            border: 2px solid #ccc;
            background-color: #fff;
            position: absolute;
            left: 530px;
            top: 0;
            z-index: 50;
            overflow: hidden;
         }
         .right img{
            width:800px ; 
         }
         /* 底部小图片 */
         .bottom{
            width: 450px;
            height: 68px;
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
         }
         /* 底部按钮弹性盒子 */
         .bottom>.an1{
            height: 68px;
            display: flex;
            align-items: center;
         }
         /* 底部按钮*/
         .bottom>.an1>button{
               width: 30px;
               height: 30px;
               border-radius: 100px;
               border: 1px solid #929292;
               background-color: #fff;
               cursor: pointer;
               font-family: \5b8b\4f53;
               font-size: 18px;
               color: #929292;
         }
         /* 底部图片弹性盒子 */
         .bottom ul{
            display: flex;
            width: 370px;
            height: 68px;
            transition: 0.2s;
            
         }
         .bottom>.small_pic1{
            overflow: hidden;
            width: 380px;
         }
         /* 底部li */
         .bottom>.small_pic1>ul li{
           /* border: 1px solid #ca141d; */
           border: 2px solid transparent;
           margin: 0 3px;
           
         }
         /* 底部图片部分 */
         .bottom img{
            width: 60px;
            height: 58px;
            margin: 3px;
            cursor: pointer;
         }
         /* 按钮悬停事件 */
         .bottom>.an1>button:hover{
            background-color: #F5F5F5;
             color: #ff6e6e;
             border: 1px solid #ff6e6e;
         }
         .bottom>.small_pic1>ul>li.active_1{
            border: 2px solid #ff6e6e;
         }
</style>